<template>
    <ul  class="list" >
        <li class="item" v-for="(items,key) of cities" :key="key" @click="handleInfo">{{key}}</li>
    </ul>    
</template>

<script>
export default {
    name: 'Alphabet',
    props:{
      cities:Object
    },
  methods:{
    handleInfo (e) {
      this.$emit('change',e.target.innerText)
    }
  }
}
</script>

<style lang='stylus' scoped>
@import '~styles/vribles.styl'
 .list
   display: flex
   flex-direction: column
   justify-content: center
   position: absolute
   top: 1.73rem
   right: 0
   bottom:0 
   width: .4rem
   .item
     line-height: .36rem
     text-align : center 
     color: $bgColor
     font-size: .3rem
</style>